<template>
  <div class="left" style="background-color: #1e1e1e">
    <div
      style="
        height: 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
        width: 100%;
      "
    >
      <SvgIcon
        :name="isCollapse ? 'merge' : 'fold'"
        :size="2"
        @click="changeLeftStatus"
        class="active-text"
      />
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      :unique-opened="true"
      :collapse="isCollapse"
      background-color="#1E1E1E"
      :default-active="activePath"
      :collapse-transition="false"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="(item, index) in menuList" :key="index">
        <template v-if="item.children">
          <el-sub-menu :index="index + ''" v-if="!item.hidden">
            <template #title>
              <AllIcon
                :style="{ marginRight: '10px' }"
                :color="item.active ? '#4caf50' : '#fff'"
                :size="20"
                :name="item.icon"
              />
              <span
                :style="{
                  color: item.active ? '#4caf50' : '#fff',
                  fontSize: '1.5rem',
                }"
                >{{ item.title }}</span
              >
            </template>
            <template v-for="(k, p) in item.children" :key="p">
              <template v-if="!k.hidden">
                <el-menu-item :index="k.path" @click="handClick($event, k)">
                  <AllIcon
                    :style="{ marginRight: '10px' }"
                    :color="k.active ? '#4caf50' : '#fff'"
                    :size="20"
                    :name="k.icon"
                  />
                  <template #title>
                    <span
                      :style="{
                        color: k.active ? '#4caf50' : '#fff',
                        fontSize: '1.5rem',
                      }"
                      >{{ k.title }}</span
                    >
                  </template>
                </el-menu-item>
              </template>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item
            :index="item.path"
            @click="handClick($event, item)"
            v-if="!item.hidden"
          >
          <AllIcon
                :style="{ marginRight: '10px' }"
                :color="item.active ? '#4caf50' : '#fff'"
                :size="20"
                :name="item.icon"
              />
            <template #title>
              <span
                :style="{
                  color: item.active ? '#4caf50' : '#fff',
                  fontSize: '1.5rem',
                }"
              >
                {{ item.title }}
              </span>
            </template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { ref, Ref, reactive, watch, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
let router = useRouter();
const emit = defineEmits(["sendLeftStaus"]);
const { menuList, activePath, isCollapse }:any = storeToRefs(useUserStore()); //对象不用写storeToRefs也行
const { changeCollapse }:any= useUserStore(); //对象不用写storeToRefs也行
const handleOpen = (key: string, keyPath: String[]) => {
  //   console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: String[]) => {
  // console.log(key, keyPath);
};
const handClick = (val: any, val2: any) => {
  router.replace(val.index);
};
function changeLeftStatus() {
  changeCollapse(!isCollapse.value);
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.left {
  // min-width:70px;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
:deep(.el-menu-vertical-demo) {
  width: 200px;
}
:deep(.el-menu--collapse) {
  width: 70px;
}
.el-menu {
  height: calc(100% - 40px);
  overflow-y: auto;
  border: none !important;
}
/* :deep(.el-sub-menu__title) {
  color: #fff;
} */
/* .el-menu::-webkit-scrollbar {
  display: none;
} */
.el-menu-item:hover {
  background-color: #4756df;
  // background-color: $active-meun-color;
}
.meun-active {
  // color:$active-menu-color;
  font-size: 1.5rem;
}
.inactivation {
  // color:$global-color;
  font-size: 1.5rem;
}
</style>
